<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form :form="form" :labelCol="{ sm: { span: 4 } }" :wrapperCol="{ sm: { span: 8 } }">
          <!-- 检查是否有 id 并且大于0，大于0是修改。其他是新增，新增不显示主键ID -->
          <!-- <a-form-item v-show="model && model.id > 0" label="ID">
            <a-input v-decorator="['id', { initialValue: 0 }]" disabled />
          </a-form-item> -->

          <a-form-item label="首次链接回复语句 - 中文" style="margin-bottom:10px;">
            <a-textarea :rows="3" v-decorator="['firstReply']" placeholder="请输入首次链接回复语句" />
          </a-form-item>
          <a-form-item label="英文">
            <a-textarea :rows="3" v-decorator="['firstReplyUs']" placeholder="请输入首次链接回复语句-英文" />
          </a-form-item>
          
          <a-form-item label="用户长时间没回复语句 - 中文" style="margin-bottom:10px;">
            <a-textarea :rows="3" v-decorator="['noReply']" placeholder="请输入用户长时间没回复语句" />
          </a-form-item>
          <a-form-item label="英文">
            <a-textarea :rows="3" v-decorator="['noReplyUs']" placeholder="请输入用户长时间没回复语句-英文" />
          </a-form-item>
          
          <a-form-item label="客服关闭连接回复语句 - 中文" style="margin-bottom:10px;">
            <a-textarea :rows="3" v-decorator="['closeReply']" placeholder="请输入客服关闭连接回复语句" />
          </a-form-item>
          <a-form-item label="英文">
            <a-textarea :rows="3" v-decorator="['closeReplyUs']" placeholder="请输入客服关闭连接回复语句-英文" />
          </a-form-item>
          
          <a-form-item label="未回复关闭连接时长(分钟)">
            <a-input v-decorator="['noReplyTime']" placeholder="请输入未回复关闭连接时长" />
          </a-form-item>
          <a-form-item  label="是否开启在线客服">
            <a-switch checked-children="开" un-checked-children="关" v-decorator="['onlineServiceStatus',{initialValue: true,valuePropName: 'checked'}]" />
          </a-form-item>
          <a-form-item   :wrapper-col="{ sm: {  offset: 4, span: 8 } }">
            <a-button type="primary" @click="handleSave">保存</a-button>
          </a-form-item>
        </a-form>
      </div>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { getServiceSetting, serviceSettingUpdate } from '@/api/service'
import pick from 'lodash.pick'

const fields = ['firstReply', 'noReply', 'closeReply', 'noReplyTime', 'onlineServiceStatus', 'firstReplyUs',
'noReplyUs',
'closeReplyUs']

export default {
  name: 'AWM-service-set',
  data() {
    return {
      confirmLoading: false,
      // 高级搜索 展开/关闭
      // 查询参数
      // 加载数据方法 必须为 Promise 对象
      form: this.$form.createForm(this),
      details: {},
    }
  },

  created() {
    fields.forEach((v) => this.form.getFieldDecorator(v))

    this.getDetails()
    // getRoleList({ t: new Date() })
  },
  computed: {
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.onSelectChange,
      }
    },
  },
  methods: {
    getDetails() {
      getServiceSetting().then((res) => {
        this.details = res.data
        let data = pick(res.data, fields)
        data.onlineServiceStatus = !!data.onlineServiceStatus
        this.form.setFieldsValue(data)
      })
    },
    handleSave() {
      const form = this.form
      this.confirmLoading = true
      form.validateFields((errors, values) => {
        if (!errors) {
          values.id = this.details.id
          values.onlineServiceStatus = values.onlineServiceStatus ? 1 : 0
          serviceSettingUpdate(values)
            .then((res) => {
              this.$message.success('修改成功!')
            })
            .catch((err) => {})
        } else {
          this.confirmLoading = false
        }
      })
    },
  },
}
</script>

 